<script setup></script>

<template>
  <div>测试</div>
  <!-- 测试前缀 和 后缀 图标 -->
  <csg-button
    class="newBtn"
    @btn-click="handBtnClick1"
    :prefixIcon="'icon-ditie'"
    :suffixIcon="'icon-chugui'"
    border
    :size="'large'"
    :name="'sss11'"
    :color="'white'"
    :type="'danger'"
    >测试按钮
  </csg-button>

  <!-- 测试 加载状态 -->
  <csg-button
    class="newBtn"
    @btn-click="handBtnClick2"
    border
    :size="'large'"
    :name="'sss11'"
    :color="'white'"
    :type="'warning'"
    :loading="buttonLoading"
    >测试按钮
  </csg-button>

  <csg-search
    v-model="searchText"
    :clearable="true"
    :searchIcon="'icon-tijiaoyanzi'"
    round
    :type="inputType"
    placeholder="请输入搜索内容"
    @change="searchChange"
  />

  <csg-select
    v-model="selectValue"
    round
    @selectChange="selectChange"
    :options="options"
  ></csg-select>

  <csg-switch
    @switchChange="switchChange"
    active
    :activeText="'已授权'"
    :inactiveText="'未授权'"
  ></csg-switch>

  <csg-date v-model="date" :valueType="'date'" @change="dateChange"></csg-date>

  <csg-table :columns="columns" :tableList="tableList"></csg-table>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const modelValue = ref(false);
const currentPage = ref(2);
const pageSize = ref(10);
const pageChange = (data) => {
  currentPage.value = data.currentPage;
  pageSize.value = data.pageSize;
};

const handlePageSizeChange = (newSize: number) => {
  pageSize.value = newSize; // 更新父组件的pageSize
};

// 数据列表
const tableList = ref([
  {
    name: '张三',
    age: 18,
    phone: '12345678901',
    sex: '男',
    address: '北京',
    status: 'normal',
    createTime: '2020-01-01 00:00:00',
    id: '3',
    money: '1000',
    user: 'admin',
    enable: true,
    show: false,
    disabled: 'true',
  },
  {
    name: '张三',
    age: 18,
    phone: '12345678901',
    sex: '男',
    address: '北京',
    status: 'normal',
    createTime: '2020-01-01 00:00:00',
    id: '2',
    money: '1000',
    user: 'admin',
    enable: true,
    show: false,
    disabled: 'false',
  },
  {
    name: '张三',
    age: 18,
    phone: '12345678901',
    sex: '男',
    address: '北京',
    status: 'normal',
    createTime: '2020-01-01 00:00:00',
    id: '1',
    money: '1000',
    user: 'admin',
    enable: false,
    show: true,
    disabled: 'false',
  },
]);

const tableOptions = ref({});

// 表格部分 配置部分
const columns = ref([
  {
    label: '地址',
    props: 'address',
    type: 'input',
    labelWidth: '100px',
    isSearch: true,
    show: true,
  },
  {
    label: '手机号',
    props: 'phone',
    type: 'input',
    labelWidth: '100px',
    isSearch: true,
    show: true,
    addShow: true,
    editShow: false,
  },
  {
    label: '姓名',
    props: 'name',
    type: 'input',
    labelWidth: '100px',
    editShow: true,
    isSearch: true,
    show: true,
  },

  {
    label: '状态',
    props: 'status',
    type: 'select',
    labelWidth: '100px',
    isSearch: true,
    addShow: false,
    show: true,
    data: [
      {
        label: '正常',
        value: 'normal',
      },
      {
        label: '禁用',
        value: 'disable',
      },
    ],
  },
  {
    label: '是否启用',
    props: 'enable',
    type: 'switch',
    labelWidth: '100px',
    editShow: true,
    addShow: true,
    show: true,
  },
  {
    label: '是否显示',
    props: 'show',
    type: 'switch',
    labelWidth: '100px',
    show: true,
  },
  {
    label: '是否禁用',
    props: 'disabled',
    type: 'switch',
    labelWidth: '100px',
    show: true,
  },
  {
    label: '创建时间',
    props: 'createTime',
    type: 'date',
    labelWidth: '100px',
    editShow: true,
    addShow: true,
    isSearch: true,
    show: true,
    // 格式问题
  },
]);

// 日期部分
const date = ref();

// 开关部分
const switchChange = (val) => {
  console.log(val, '开关行为');
};
const dateChange = (val) => {
  console.log(val, '日期行为');
};

// 下拉框部分
const selectValue = ref('1');

const options = ref([
  {
    label: '羽毛球',
    value: '1',
  },
  {
    label: '篮球',
    value: '2',
  },
  {
    label: '足球',
    value: '3',
  },
]);
const selectChange = (value) => {};

// 输入框部分
const searchText = ref('羽毛球');
const inputType = ref('textarea');
const searchChange = (payload) => {};

// 按钮部分
const buttonLoading = ref(false);
const handBtnClick1 = (payload) => {};

const handBtnClick2 = (payload) => {
  buttonLoading.value = true;
  console.log('点击了按钮', payload);
  setTimeout(() => {
    buttonLoading.value = false;
  }, 3000);
};
</script>

<style lang="scss" scoped>
.newBtn {
  width: 200px;
  margin: 10px;
}
// 样式穿透
:deep(.csg-button-icon) {
  font-size: 26px;
}
</style>
